/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2018-12-15 Time: 23:16
 *
 * 新建服务工单
 */

import React, {Component} from 'react';
import {
    SafeAreaView,
    View,
    Text,
    TouchableOpacity,
    ScrollView,
    TextInput,
    Image, ToastAndroid, Modal
} from 'react-native';
import {connect} from 'react-redux';
import {styles} from './chooseConsumeScreen.Style';
import {
    COLOR_GRAY_LINE,
    COLOR_FOCUS, COLOR_WHITE, FONT_COLOR_SUB_TITLE,
    FONT_COLOR_TITLE, FONT_SIZE_TITLE
} from "../../../../constant/PHColors"
import AntDesign from "react-native-vector-icons/AntDesign";
import FontAwesome from "react-native-vector-icons/FontAwesome";
import Entypo from "react-native-vector-icons/Entypo";
import DividingLineViewComponent from "../../../../component/DividingLineViewComponent/DividingLineViewComponent";

class chooseConsumeScreen extends Component {

    static navigationOptions = ({navigation}) => ({
        title: '消费',
        headerRight: (
            <TouchableOpacity activeOpacity={0.9} onPress={navigation.getParam('submitClick')}>
                <View style={{ height: 44,paddingRight:15, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center'}}>
                    <Text style={{fontSize: 18, color: '#212121'}}>
                        完成
                    </Text>
                </View>
            </TouchableOpacity>
        )
    })

    // 构造
    constructor(props) {
        super(props);

        // 初始状态
        this.state = {
            consume:this.props.navigation.getParam("consume"),
            numModalVisible:false,
        };
        this.selectedItem = {};
    }

    componentWillMount() {
        this.props.navigation.setParams({submitClick: this._submitClick});
    }

    render(){
        return (
            <SafeAreaView style={styles.body}>
                <ScrollView style={styles.body}>
                    {
                        this.props.ondictcode.map((item, index) => {
                            if(item.mname==='消费项目'&&item.level!=='1'){
                                let menu = "false";
                                if (item.level==='2') {
                                    menu = "true"
                                }
                                let checkNum = 0;
                                if(this.state.consume[item.code]){
                                    checkNum = this.state.consume[item.code]['num']
                                }

                                return (
                                    /*消费项目*/
                                    this.onRenderConsumeList(item, index, menu, checkNum)
                                );
                            }

                        })
                    }

                </ScrollView>

                {/*选择数量*/}
                <Modal onRequestClose={() => this._requestClose()} animationType={'none'} transparent={true}
                       visible={this.state.numModalVisible}>
                    <TouchableOpacity style={{flex: 1}} activeOpacity={1} onPress={() => this._requestClose()}>
                        <View style={styles.modalContainer}>
                            <View style={styles.modalView}>
                                <View style={styles.modalHeader}>
                                    <Text style={styles.modalHeaderText}>
                                        选择数量
                                    </Text>
                                </View>

                                <ScrollView style={styles.scrollView}>
                                    {
                                        this._render_Num()
                                    }
                                </ScrollView>
                            </View>
                        </View>
                    </TouchableOpacity>
                </Modal>
            </SafeAreaView>
        )
    }

    onRenderConsumeList=(item, index, menu, checkNum)=>{
        let outHtml;
        if(menu==='true'){
            outHtml = (
                <View key={index} style={styles.cellMenuView}>
                    <Text style={styles.cellMenuText}>
                        {item.name}
                    </Text>
                </View>
            )
        }else if(menu==='false'){
            outHtml = (
                <View key={index} style={styles.boxBody}>
                    <TouchableOpacity activeOpacity={1} style={styles.leftBox} onPress={() => {
                        let consume_json = this.state.consume;
                        if(consume_json[item.code]){
                            delete consume_json[item.code]
                        }else{
                            consume_json[item.code] = {"name":item.name,"num":1};
                        }
                        this.setState({
                            consume : consume_json
                        })
                    }}>
                        {
                            (Number(checkNum) !== 0)
                                ?
                            (<AntDesign name={'checkcircle'} size={23} style={{color: COLOR_FOCUS, marginLeft: 10}}/>)
                                :
                            (<Entypo name={'circle'} size={23} style={{color: '#b3b9ba', marginLeft: 10}}/>)
                        }
                        <Text style={styles.leftText}>
                            {item.name}
                        </Text>
                    </TouchableOpacity>

                    <TouchableOpacity activeOpacity={1} style={styles.rightBox} onPress={() => {
                        let consume_json = this.state.consume;
                        consume_json[item.code] = {"name":item.name,"num":1};
                        this.setState({
                            consume : consume_json
                        })
                    }}>
                        <Text style={[styles.rightText,(Number(checkNum)===1)?{color:COLOR_FOCUS,fontSize:22}:{color:'#4c4c4c'}]}>
                            1
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity activeOpacity={1} style={styles.rightBox} onPress={() => {
                        let consume_json = this.state.consume;
                        consume_json[item.code] = {"name":item.name,"num":2};
                        this.setState({
                            consume : consume_json
                        })
                    }}>
                        <Text style={[styles.rightText,(Number(checkNum)===2)?{color:COLOR_FOCUS,fontSize:22}:{color:'#4c4c4c'}]}>
                            2
                        </Text>
                    </TouchableOpacity>
                    {/*<TouchableOpacity activeOpacity={1} style={styles.rightBox} onPress={() => {*/}
                        {/*let consume_json = this.state.consume;*/}
                        {/*consume_json[item.code] = {"name":item.name,"num":3};*/}
                        {/*this.setState({*/}
                            {/*consume : consume_json*/}
                        {/*})*/}
                    {/*}}>*/}
                        {/*<Text style={[styles.rightText,(Number(checkNum)===3)?{color:COLOR_FOCUS,fontSize:22}:{color:'#4c4c4c'}]}>*/}
                            {/*3*/}
                        {/*</Text>*/}
                    {/*</TouchableOpacity>*/}
                    <TouchableOpacity activeOpacity={1} style={styles.rightBox} onPress={() => {
                        this.setState({
                            numModalVisible: !this.state.numModalVisible,
                        })
                        this.selectedItem = item
                    }}>
                        <Text style={[styles.rightText,(Number(checkNum)>2||Number(checkNum)<0)?{color:COLOR_FOCUS,fontSize:22}:{color:'#4c4c4c'}]}>
                            {(Number(checkNum)>2||Number(checkNum)<0)?Number(checkNum):3}
                        </Text>
                    </TouchableOpacity>
                </View>
            )
        }
        return outHtml
    };

    //循环选择数量模态
    _render_Num = () => {
        let returnhtml;
        let linehtml = (<DividingLineViewComponent lineHeight={1}/>);
        let selectedNum = 0;
        if(this.state.consume[this.selectedItem.code]){
            selectedNum =  Number(this.state.consume[this.selectedItem.code]['num'])
        }
        for (let i = -5; i <= 15; i++) {
            this.num = i;
            let font_color = FONT_COLOR_SUB_TITLE;
            if(selectedNum === i){
                font_color = COLOR_FOCUS;
            }
            let html = (
                <TouchableOpacity style={styles.modalItemView} activeOpacity={0.8} onPress={() => {
                    let consume_json = this.state.consume;
                    if(i===0){
                        delete consume_json[this.selectedItem.code];
                    }else{
                        consume_json[this.selectedItem.code] = {"name":this.selectedItem.name,"num":i};
                    }
                    this.setState({
                        consume: consume_json,
                        numModalVisible: !this.state.numModalVisible
                    })
                }}>
                    <View style={styles.modalItemView}>
                        <Text style={[styles.modalItemText, {color: font_color}]}>
                            {this.num}
                        </Text>
                    </View>
                </TouchableOpacity>
            );

            returnhtml = [returnhtml, linehtml, html]
        }
        return returnhtml;
    };

    _requestClose() {
        this.setState({
            numModalVisible: false,
        })
    }

    _submitClick=()=>{
        let {dispatch} = this.props;
        let str = this.state.consume
        this.props.navigation.navigate(this.props.navigation.getParam("page"));
        this.props.navigation.state.params.goBack(str);
    }

}

const props = state => {
    return {
        ondictcode:state.onCache.dictcode
    }
}

export default chooseConsumeScreen = connect(props)(chooseConsumeScreen);
